html {scroll-behavior: smooth;}
body {margin: 0; font-family: 'Josefin Sans', serifenlose; color: #5c5c5c; background-color: rgb(255, 249, 201)}
.body {overflow: hidden}
header {height: 100vh; text-align: center; background: url("images/Maison les pieds dans l'eau.png") center/cover fixed; margin-bottom: 100px}
header div {margin: 0; padding: 50px 0; font-size: 2em; letter-spacing: 1em; margin-bottom: 100px; background-color: rgb(255, 249, 201)}
h1 {font-size: 2em}
h1, h2 {text-align: center; margin: 2em auto}
h1:first-child + p::after {content: ""; display: block; margin: 1em auto; height: 50vh; background: url("images/Vue sur les bateaux de pêche.jpg") 0%/cover fixed}
li {display: inline-block; padding: 0.4em; margin: 0 10px; background-color: #fff780; border-radius: 45%}
li:hover {border-radius: 70% 45%}
a {text-decoration: none; color: inherit; font-size: 1.2em}
a:hover {color: initial; font-size: 1.5em}
p {width: 80%; margin: 10px auto; line-height: 185%; font-size: 1.2em; text-align: center}
.gall {text-align: center}
img {max-width: 100%; position: absolute; top: 50%; transform: translate(-50%, -50%); cursor: pointer}
.soso {width: 27%; aspect-ratio: 3 / 2; display: inline-block; overflow: hidden; margin: 15px; position: relative}
.stick {position: fixed; top: 0; z-index: 1; width: 100%; margin: 0; background-color: #fff780}

@media (max-width: 750px) {img {position: initial; transform: initial; max-width: 100%!important} .soso {width: initial; aspect-ratio: initial} 
nav {text-align: center; position: absolute !important; top: 0; background-color: #fff780; height: 40px; width: 100%; overflow: hidden}   
nav::before {content: "☰"; font-size: 30px} li {display: block; margin: 0 auto; padding: 20px 0} .newBox {height: auto} .Boxb {width: initial!important}}

.Box {position: fixed; top: 0; z-index: 2; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8)}
.Boxb {min-width: 400px; width: 60vw; margin: 15vh auto; text-align: center; position: relative}
.new {position: initial; transform: initial; max-height: 75vh; cursor: pointer; border: 2px white solid} 

.renew {animation: 0.3s new linear}
@keyframes new {from {opacity: 0;} to {opacity: 1}}
.remove {animation: 0.3s back linear}
@keyframes back {100% {opacity: 0}}

button {font-size: 1.5rem; position: absolute; top: 10px; right: 10px} 
.left {top: 50%; left: 0; right: initial}
.right {top: 50%; right: 0}



                     


/*
button {
	background: none;
	border: none;
        font-size: 1.5rem;
        color: white
      }   

.removel {animation: 0.3s backl linear}
@keyframes backl {
100% {margin-left: -100vw}
}

.remover {animation: 0.3s backr linear}
@keyframes backr {
100% {margin-left: 100vw}
}*/